<template>
    <div class="management_container">
      <!-- 顶部导航 -->
      <div class="management_tabbar">
        <!-- management组件的顶部导航tabbar -->
        <Tabbar2></Tabbar2>
      </div>
      <!-- 左侧菜单 -->
      <div class="management_slider">
        <!-- 展示菜单 -->
        <!-- 滚动组件 --> 
        <el-scrollbar class="scrollbar">
          <!-- 菜单组件 -->
          <el-menu background-color="#494646" text-color="white">
            <el-menu-item index="1" @click="goSelf">个人中心</el-menu-item>
            <el-menu-item index="2" @click="goManagement">用户管理</el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
      <!-- 内容展示区域 -->
    <div class="management_main" :class="{fold:LayOutSettingStore.fold?true:false}">
        <router-view></router-view>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
    import { ref, watch, onMounted } from 'vue'
    //获取路由对象
    import { useRouter } from 'vue-router'
    //引入顶部tabbar2组件
    import Tabbar2 from './tabbar2/index.vue'

    //获取用户相关的小仓库
    import useUserStore from '@/store/modules/user';
    import useLayOutSettingStore from '@/store/modules/setting'
    let userStore = useUserStore()
    //获取layout配置仓库
    let LayOutSettingStore = useLayOutSettingStore()

    //获取路由对象
    let $router = useRouter()

    const goManagement = () => {
      $router.push('/management/userManage')
    }

    const goSelf = () => {
      $router.push('/management/self')
    }
  </script>
  
  <style lang="scss" scoped>
    .management_tabbar {
      position: fixed;
      width: 100%;
      height: $base-tabbar-height;
      top: 0;
      left: 0;
      transition: all 0.3s;
    }
    .management_slider {
      position: fixed;
      width: $base-menu-width;
      height: calc(100vh - $base-tabbar-height);
      top: $base-tabbar-height;
      left: 0;
      background: $base-menu-background;
      transition: all 0.3s;
      .scrollbar {
        width: 100%;
        height: 100%;
        .el-menu {
          border-right: none;
        }
      }
    }
    .management_main {
      position: fixed;
      width: calc(100% - $base-menu-width);
      height: calc(100vh - $base-tabbar-height);
      background-color: rgb(253, 253, 253);
      left: $base-menu-width;
      top: $base-tabbar-height;
      padding: 20px;
      overflow: auto;
      transition: all 0.3s;
    }
  </style>
